let nav = document.querySelector('.nav');
// console.log(nav);
nav.addEventListener('click', function (e) {
    // console.log(e.type);
    if (e.type == 'click') {
        // console.log(111);
        location.href = `shopping.html`
    } else {
        return
    }

})

//准备创建数据库
var cartList = [
    { id: 001, title: '玻尿酸高保湿面膜10片26ml', pic: "../img/0101.jpg", price: 79, number: 100, buyNum: 1, isSelect: false },
    { id: 002, title: '[温和]米酵素洁面乳', pic: "../img/0201.jpg", price: 59, number: 100, buyNum: 1, isSelect: false },
    { id: 003, title: '玻尿酸淡纹变色(润唇膏)', pic: "../img/0301.jpg", price: 100, number: 100, buyNum: 1, isSelect: false }
]
// console.log(cartList);

//获取元素
let contentBox = document.querySelector('.content');
// console.log(contentBox);

// 渲染页面
function bindHtml() {
    var totalSelect = 0, totalPrice = 0, totalNum = 0;
    cartList.forEach(item => {
        // console.log(item);
        //判断 isSelect 为true 的才进行叠加
        if (item.isSelect === true) {
            // console.log(111);
            totalNum += item.buyNum
            totalPrice += item.price * item.buyNum
            totalSelect++
        }
    })



    var str = `
      <div class="empty ${cartList.length === 0 ? 'active' : ''}">
        <img src="  " alt="">
      </div>
      <div class="container ${cartList.length !== 0 ? 'active' : ''}">
        <div class="top">
          <input class="allBtn" type="checkbox" ${totalSelect === cartList.length ? 'checked' : ''}> 全选
        </div>
        <ul>
    `

    // 在渲染的时候, 把数据的 id 以自定义属性的方式记录在元素身上
    cartList.forEach(function (item) {
        str += `
      <li>
        <div class="select">
          <input data-index="${item.id}" class="select_item" type="checkbox" ${item.isSelect ? 'checked' : ''}>
        </div>
        <div class="show">
          <img src="${item.pic}" alt="">
        </div>
        <div class="desc">${item.title}</div>
        <div class="price">
          ￥ ${item.price.toFixed(2)}
        </div>
        <div class="number">
          <button data-index="${item.id}" class="sub">-</button>
          <input type="text" value="${item.buyNum}">
          <button data-index="${item.id}" class="add">+</button>
        </div>
        <div class="total">
          ￥ ${(item.price * item.buyNum).toFixed(2)}
        </div>
        <div class="destroy">
          <button data-index="${item.id}" class="del">删除</button>
        </div>
      </li>
    `
    })

    str += `
        </ul>
        <div class="bottom">
          <div class="totalNum">
            总件数: ${totalNum}
          </div>
          <div class="btns">
            <button class="clear">清空购物车</button>
            <button class="pay" ${totalSelect === 0 ? 'disabled' : ''}>去结算</button>
            <button class="delAll" ${totalSelect === 0 ? 'disabled' : ''}>删除所有已选中</button>
          </div>
          <div class="totalPrice">
            总价: ￥ ${totalPrice.toFixed(2)}
          </div>
        </div>
      </div>
    `

    contentBox.innerHTML = str
}

bindHtml()

//给contentBox内所有的标签绑定监听事件
contentBox.addEventListener('click', handler);
function handler(e){
    //判断全选
    if(e.target.className === 'allBtn'){
        var type = e.target.checked
        cartList.forEach(function (item) { item.isSelect = type })
      // 从新渲染页面
      bindHtml()
    }

    //判断点击的是结算
    if(e.target.className === 'pay'){
        // console.log('去结算');
        alert('那就这样吧')
    }

    //判断点击的是清空购物车按钮
    if(e.target.className === 'clear'){
        // console.log(111);
        //让 cartList 变成空数组
        cartList.length = 0;
        // 从新渲染页面
        bindHtml()
    }

    //判断点击的是删除所有已选中按钮
    if (e.target.className === 'delAll') {
        // 把数组里面所有 isSelect 为 true 的删除掉
        // 把数组里面所有 isSelect 为 false 的留下
        // 我需要从数组里面把所有为 false 的筛选出来, 组成一个新的数组, 把原始数组替换掉
        // 把原始数组修改了
        cartList = cartList.filter(function (item) { return item.isSelect === false })
        // 从新渲染页面
        bindHtml()
      }

    // 2-5. 判断点击的是每一个数据的 选中 按钮
    if (e.target.className === 'select_item') {
        // 找到你点击的这个按钮是根据哪一条数据渲染的
        // 找到数组内对应的数据
        // 把对应的这一条数据的 isSelect 修改了
        // 从新渲染页面
        // 例子: 你点击的这一条是根据 { id: 1 } 这一个数据渲染的
        //      你就要找到数组内 { id: 1 } 的这一条数据
        //      把这一条数据的 isSelect 修改
        //      从新渲染页面
        var id = e.target.dataset.index - 0
        // 找到数组内 id 一样的那一条数据
        var info = cartList.find(function (item) { return item.id === id })
        // 修改 isSelect
        info.isSelect = !info.isSelect
        // 从新渲染页面
        bindHtml()
      }

      // 2-6. 判断点击的是每一个数据的 减少 按钮
    if (e.target.className === 'sub') {
        // 拿到对应的 id
        var id = e.target.dataset.index - 0;
        // console.log(id);
        // 找到数组内对应的数据
        var info = cartList.find(function (item) { return item.id === id })
        // 判断如果已经是 1, 不需要做了
        if (info.buyNum <= 1) return
        // 修改 buyNum - 1
        info.buyNum--
        // 从新渲染页面
        bindHtml()
      }

      if (e.target.className === 'add') {
        // 拿到 id
        var id = e.target.dataset.index - 0
        // 找打数据
        var info = cartList.find(function (item) { return item.id === id })
        // 判断
        if (info.buyNum >= info.number) return
        // 修改 buyNum++
        info.buyNum++
        // 从新渲染页面
        bindHtml()
      }

      if (e.target.className === 'del') {
        // 找到 id
        var id = e.target.dataset.index - 0
        // 从原始数组中删除 id 一样的那一条
        cartList = cartList.filter(function (item) { return item.id !== id })
        // 从新渲染页面
        bindHtml()
      }
}


